<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>主办单位样式预览</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            background: #f5f7fa;
            padding: 20px;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
        }
        
        h1 {
            text-align: center;
            color: #333;
            margin-bottom: 30px;
        }
        
        /* 大会简介 */
        .conference_overview_section {
            margin: 2rem 0;
            padding: 2rem;
            background: white;
            border-radius: 0.75rem;
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
        }
        
        .section_title {
            font-size: 1.75rem;
            font-weight: 700;
            color: #2c3e50;
            margin-bottom: 1.5rem;
            padding-bottom: 1rem;
            border-bottom: 3px solid #667eea;
            display: flex;
            align-items: center;
            gap: 0.75rem;
        }
        
        .title_icon {
            font-size: 2rem;
        }
        
        .intro_content {
            margin-bottom: 2rem;
            line-height: 1.8;
            color: #555;
            font-size: 1rem;
        }
        
        /* 主办单位表格式布局 */
        .organizers_table {
            border: 2px solid #333;
            border-radius: 0.5rem;
            overflow: hidden;
            margin-top: 2rem;
        }
        
        .organizer_row {
            display: flex;
            border-bottom: 2px solid #333;
            min-height: 120px;
        }
        
        .organizer_row:last-child {
            border-bottom: none;
        }
        
        .organizer_row_header {
            width: 150px;
            flex-shrink: 0;
            background: white;
            border-right: 2px solid #333;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.1rem;
            font-weight: 700;
            color: #000;
            padding: 1rem;
            text-align: center;
        }
        
        .organizer_row_content {
            flex: 1;
            background: white;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-wrap: wrap;
            gap: 2rem;
            padding: 1.5rem 2rem;
        }
        
        .organizer_item_inline {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-width: 180px;
        }
        
        .organizer_logo_inline {
            width: 120px;
            height: 120px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 0.75rem;
            padding: 0.5rem;
        }
        
        .organizer_logo_inline img {
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
        }
        
        .organizer_name_inline {
            font-size: 0.95rem;
            font-weight: 500;
            color: #333;
            text-align: center;
            line-height: 1.4;
        }
        
        /* 响应式设计 */
        @media (max-width: 768px) {
            .organizer_row {
                flex-direction: column;
                min-height: auto;
            }
            
            .organizer_row_header {
                width: 100%;
                border-right: none;
                border-bottom: 2px solid #333;
                padding: 0.75rem;
                font-size: 1rem;
            }
            
            .organizer_row_content {
                flex-direction: column;
                gap: 1.5rem;
                padding: 1.5rem;
            }
            
            .organizer_item_inline {
                min-width: 150px;
            }
            
            .organizer_logo_inline {
                width: 100px;
                height: 100px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>🎯 主办单位展示效果预览（新表格式样式）</h1>
        
        <div class="conference_overview_section">
            <h2 class="section_title">
                <span class="title_icon">🏛️</span>
                大会简介
            </h2>
            
            <!-- 会议简介文本 -->
            <div class="intro_content">
                <p><strong>人工智能与计算机工程</strong>作为当今科技发展的核心动力，正在不断推动创新与技术革新。为进一步促进学术交流、探讨前沿问题，<strong>第六届人工智能与计算机工程国际学术会议（ICAICE 2025）</strong>将于<strong>2025年11月7-9日在重庆召开</strong>。</p>
                <p style="margin-top: 1rem;">本次会议由重庆邮电大学主办，聚焦人工智能、机器学习、大数据计算、智能系统优化等关键研究方向，为全球学者提供展示最新成果、交流学术思想的国际平台。</p>
            </div>
            
            <!-- 主办单位表格 -->
            <div class="organizers_table">
                
                <!-- 主办单位 -->
                <div class="organizer_row">
                    <div class="organizer_row_header">主办单位</div>
                    <div class="organizer_row_content">
                        <div class="organizer_item_inline">
                            <div class="organizer_logo_inline">
                                <svg width="120" height="120" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
                                    <circle cx="60" cy="60" r="50" fill="#4CAF50"/>
                                    <text x="60" y="70" font-size="24" fill="white" text-anchor="middle" font-weight="bold">重庆</text>
                                </svg>
                            </div>
                            <div class="organizer_name_inline">重庆邮电大学</div>
                        </div>
                    </div>
                </div>
                
                <!-- 协办单位 -->
                <div class="organizer_row">
                    <div class="organizer_row_header">协办单位</div>
                    <div class="organizer_row_content">
                        <div class="organizer_item_inline">
                            <div class="organizer_logo_inline">
                                <svg width="120" height="120" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
                                    <circle cx="60" cy="60" r="50" fill="#2196F3"/>
                                    <text x="60" y="70" font-size="24" fill="white" text-anchor="middle" font-weight="bold">西电</text>
                                </svg>
                            </div>
                            <div class="organizer_name_inline">西安电子科技大学</div>
                        </div>
                        <div class="organizer_item_inline">
                            <div class="organizer_logo_inline">
                                <svg width="120" height="120" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
                                    <circle cx="60" cy="60" r="50" fill="#FF9800"/>
                                    <text x="60" y="70" font-size="24" fill="white" text-anchor="middle" font-weight="bold">广大</text>
                                </svg>
                            </div>
                            <div class="organizer_name_inline">广州大学</div>
                        </div>
                        <div class="organizer_item_inline">
                            <div class="organizer_logo_inline">
                                <svg width="120" height="120" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
                                    <rect x="10" y="10" width="100" height="100" fill="#9C27B0"/>
                                    <text x="60" y="70" font-size="20" fill="white" text-anchor="middle" font-weight="bold">期刊</text>
                                </svg>
                            </div>
                            <div class="organizer_name_inline">《计算机工程》</div>
                        </div>
                    </div>
                </div>
                
                <!-- 支持单位 -->
                <div class="organizer_row">
                    <div class="organizer_row_header">支持单位</div>
                    <div class="organizer_row_content">
                        <div class="organizer_item_inline">
                            <div class="organizer_logo_inline">
                                <svg width="120" height="120" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
                                    <circle cx="60" cy="60" r="50" fill="#F44336"/>
                                    <text x="60" y="70" font-size="24" fill="white" text-anchor="middle" font-weight="bold">安工</text>
                                </svg>
                            </div>
                            <div class="organizer_name_inline">安徽工程大学</div>
                        </div>
                    </div>
                </div>
                
            </div>
        </div>
        
        <div style="margin-top: 2rem; padding: 1rem; background: #e3f2fd; border-radius: 0.5rem; text-align: center;">
            <p style="color: #1976d2; font-weight: 600;">💡 提示：这是静态预览页面，实际效果会从数据库加载真实的Logo图片</p>
            <p style="color: #666; margin-top: 0.5rem; font-size: 0.9rem;">在浏览器中调整窗口大小可以查看响应式效果</p>
        </div>
    </div>
</body>
</html>




